<template>
  <el-descriptions style="margin-top: 10px;width: 500px" :column="1" border>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-info"></i>
        用户账号
      </template>
      {{user.userid}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名称
      </template>
      {{user.username}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-star-on"></i>
        用户密码
      </template>
      {{user.password}}
      <el-button style="float: right" type="primary" size="small" @click="changePass">修改</el-button>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user-solid"></i>
        用户昵称
      </template>
      {{user.nickname}}
      <el-button style="float: right" type="primary" size="small" @click="changeNickname">修改</el-button>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      {{user.phone}}
      <el-button style="float: right" type="primary" size="small" @click="changePhone">修改</el-button>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-s-custom"></i>
        身份
      </template>
      {{user.identity}}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
export default {
  name: "informationShow",
  data(){
    return{
      /*user: JSON.parse(window.sessionStorage.getItem("user"))*/
      /*wallet*/
      user:{
        userid:'10000',
        username:'王老板',
        password:'1900000',
        nickname:'王小二',
        phone:'13567890987',
        identity:'管理员',
      }
    }
  },
  /*
  mounted(){
    this.initInformation;
  }
  * */
  methods:
    {
      initInformation(){
        this.getRequest('/获取用户信息',user.id).then(res=>{
          if(res)
          {
            //this.brand = res
          }
        })
      },
      changePass(){
        this.$prompt('请输入由数字，字母或下划线构成的1~10位新密码', '修改密码', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\w{1,10}$/,
          inputErrorMessage: '密码格式不正确'
        }).then(({ value }) => {
          this.user.password = value;
          this.$message({
            type: 'success',
            message: '你的新密码是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      changeNickname(){
        this.$prompt('请输入新昵称', '修改昵称', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.user.nickname = value;
          this.$message({
            type: 'success',
            message: '你的新昵称是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      changePhone(){
        this.$prompt('请输入新手机', '修改手机号', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/,
          inputErrorMessage: '手机格式不正确'
        }).then(({ value }) => {
          this.user.phone = value;
          this.$message({
            type: 'success',
            message: '你的新手机是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
    }
}
</script>

<style scoped>

</style>
